import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  DeviceEventEmitter,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import Base from '../../../utils/Base';
import NavCon from '../../Public/NavCon';
import Loading from '../../Public/Loading';

import { changeSubBrand, fetchCarBrands } from '../../../actions/communicateAction';

const { window } = Base;
const { width } = window;

class Button extends Component {
  render() {
    const color = this.props.selected ? '#333' : '#666';
    const bgColor = this.props.selected ? '#fff' : '#f8f8fb';
    const fontSize = this.props.selected ? PxToDp(14) : PxToDp(12);
    const { carBrand } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[styles.leftBtn, { backgroundColor: bgColor }]}
        onPress={() => this.props.onPress()}
      >
        <Text style={[styles.btnText, { color, fontSize }]}>{carBrand.text}</Text>
      </TouchableOpacity>
    );
  }
}

class SubBrand extends Component {
  render() {
    const { subBrand } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[styles.subBtn]}
        onPress={() => this.props.onPress()}
      >
        <Text style={[styles.subText]}>{subBrand.text}</Text>
      </TouchableOpacity>
    );
  }
}

class ChooseBrand extends Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: '',
      btnState: [],
      subBrands: [],
    };
  }

  componentDidMount() {
    this.props.dispatch(fetchCarBrands((data) => {
      if (data.result) {
        this.setState({ subBrands: data.result });
      }
    }));
  }

  _goBack() {
    this.props.navigator.pop();
  }

  _completed() {
    DeviceEventEmitter.emit('showToast', '添加车型成功！');
    this.props.navigator.pop();
  }

  _btnSelected(length, index, carBrand) {
    const arr = [];
    for (let i = 0; i < length; i += 1) {
      arr[i] = false;
    }

    arr[index] = true;

    const subBrands = carBrand.children;

    this.setState({
      btnState: arr,
      subBrands,
    });
  }

  _subBrandSelected(subBrand) {
    const { dispatch } = this.props;
    this.props.navigator.pop();
    dispatch(changeSubBrand(subBrand));
  }

  render() {
    const { carBrands } = this.props;
    const length = carBrands.length;
    const { subBrands } = this.state;
    return (
      <View style={[styles.bgColor, styles.flex, styles.titleTop]}>
        <NavCon currentTitle="选择品牌" bgColor="#fff" onPress={() => this._goBack()} />

        {
          this.props.carBrands && this.state.subBrands
          ?
            <View style={[styles.row, styles.flex, styles.wrapper]}>
              <ScrollView style={[styles.leftBar]}>
                {
                  carBrands.map((carBrand, index) => (
                    <Button
                      key={carBrand.text}
                      carBrand={carBrand}
                      selected={this.state.btnState[index]}
                      onPress={() => this._btnSelected(length, index, carBrand)}
                    />
                  ))
                }
              </ScrollView>
              <ScrollView style={[styles.row, styles.rightContent]}>
                {
                subBrands.map(subBrand => (
                  <SubBrand
                    key={subBrand.text}
                    subBrand={subBrand}
                    onPress={() => this._subBrandSelected(subBrand)}
                  />
                ))
              }
              </ScrollView>
            </View>
          :
            <View style={styles.load}>
              <Loading />
            </View>
        }

      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: '#f8f8fb',
    alignItems: 'center',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  wrapper: {
    width: '100%',
    borderColor: '#ececec',
    borderTopWidth: 1,
  },
  leftBar: {
    width: PxToDp(108),
    height: '100%',
    backgroundColor: '#f8f8fb',
  },
  leftBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(38),
    borderColor: '#eeeff3',
    borderBottomWidth: 1,
  },
  btnText: {
    color: '#666',
    fontSize: PxToDp(12),
  },
  rightContent: {
    width: PxToDp(width - 108),
    height: '100%',
    paddingLeft: PxToDp(20),
    backgroundColor: '#fff',
  },
  subBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    height: PxToDp(30),
    marginTop: PxToDp(10),
    paddingLeft: PxToDp(16),
    paddingRight: PxToDp(16),
    borderRadius: PxToDp(100),
    borderColor: '#eeeff3',
    borderWidth: 1,
  },
  subText: {
    color: '#333',
    fontSize: PxToDp(14),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  load: {
    height: PxToDp(500),
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
  },
});

export default ChooseBrand;
